<!doctype html>
<html lang="zh-CN" th:replace="web-layout :: layout(~{::title}, ~{::style}, ~{}, ~{::script}, ~{::body}, 'userExam')"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的考试</title>
    <style>

    </style>
    <script>
        $("#loadMore").click(function () {
            var pageNumber = parseInt($("#pageNumber").val()) + 1;
            dataList(pageNumber);
        })

        $(".btn-search").click(function () {
            dataList(1)
        })

        var main = $("#dataList");                     //主体元素
        function dataList(pageNumber) {
            $.post("/user/exam/child/list", {
                "name": $(".search-text").val(),
                "pageNumber": pageNumber
            }, function (result) {
                if (pageNumber == 1) {
                    main.html(result);
                } else {
                    main.append(result);
                }
                var pages = parseInt($("#pages").val());
                if (pages == pageNumber) {
                    $(".more").hide();
                }
            });
        }

        $(function () {
            // dataList(1)
            $('#table').bootstrapTable({
                data: [
                    {
                        'name': 'Mike',
                        'image': 'https://robohash.org/68.186.255.198.png',
                        'follower': 10,
                        'following': 123,
                        'snippets': 12
                    },
                    {
                        'name': 'Tim',
                        'image': 'https://robohash.org/18.146.255.198.png',
                        'follower': 70,
                        'following': 23,
                        'snippets': 42
                    },
                    {
                        'name': 'Jorge',
                        'image': 'https://robohash.org/63.186.255.198.png',
                        'follower': 40,
                        'following': 74,
                        'snippets': 567
                    },
                    {
                        'name': 'Luke',
                        'image': 'https://robohash.org/68.186.155.198.png',
                        'follower': 550,
                        'following': 23,
                        'snippets': 52
                    },
                    {
                        'name': 'Mike',
                        'image': 'https://robohash.org/68.186.255.198.png',
                        'follower': 10,
                        'following': 123,
                        'snippets': 12
                    },
                    {
                        'name': 'Tim',
                        'image': 'https://robohash.org/18.146.255.198.png',
                        'follower': 70,
                        'following': 23,
                        'snippets': 42
                    },
                    {
                        'name': 'Jorge',
                        'image': 'https://robohash.org/63.186.255.198.png',
                        'follower': 40,
                        'following': 74,
                        'snippets': 567
                    },
                    {
                        'name': 'Luke',
                        'image': 'https://robohash.org/68.186.155.198.png',
                        'follower': 550,
                        'following': 23,
                        'snippets': 52
                    },
                    {
                        'name': 'Mike',
                        'image': 'https://robohash.org/68.186.255.198.png',
                        'follower': 10,
                        'following': 123,
                        'snippets': 12
                    },
                    {
                        'name': 'Tim',
                        'image': 'https://robohash.org/18.146.255.198.png',
                        'follower': 70,
                        'following': 23,
                        'snippets': 42
                    },
                    {
                        'name': 'Jorge',
                        'image': 'https://robohash.org/63.186.255.198.png',
                        'follower': 40,
                        'following': 74,
                        'snippets': 567
                    },
                    {
                        'name': 'Luke',
                        'image': 'https://robohash.org/68.186.155.198.png',
                        'follower': 550,
                        'following': 23,
                        'snippets': 52
                    },
                    {
                        'name': 'Mike',
                        'image': 'https://robohash.org/68.186.255.198.png',
                        'follower': 10,
                        'following': 123,
                        'snippets': 12
                    },
                    {
                        'name': 'Tim',
                        'image': 'https://robohash.org/18.146.255.198.png',
                        'follower': 70,
                        'following': 23,
                        'snippets': 42
                    },
                    {
                        'name': 'Jorge',
                        'image': 'https://robohash.org/63.186.255.198.png',
                        'follower': 40,
                        'following': 74,
                        'snippets': 567
                    },
                    {
                        'name': 'Luke',
                        'image': 'https://robohash.org/68.186.155.198.png',
                        'follower': 550,
                        'following': 23,
                        'snippets': 52
                    }
                ]
            })
        })

        function customViewFormatter (data) {
            var template = $('#profileTemplate').html()
            var view = ''
            $.each(data, function (i, row) {
                view += template.replace('%IMAGE%', row.image)
                    .replace('%TITLE%', row.name);
            })

            return `<div class="row mx-0">${view}</div>`
        }
    </script>
</head>
<body>
<table
        id="table"
        data-search="true"
        data-pagination="true"
        data-page-size="6"
        data-show-custom-view="true"
        data-custom-view="customViewFormatter"
        data-show-custom-view-button="true">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="follower">Follower</th>
        <th data-field="following">Following</th>
        <th data-field="snippets">Snippets</th>
    </tr>
    </thead>
</table>
<template id="profileTemplate">
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="%IMAGE%" alt="">
                <div class="caption">
                    <h3>%TITLE%</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    </div>
</template>
</body>
</html>